<template>
  <page class="app-container">
    <!-- 过滤条件 begin-->
    <el-form :inline="true" class="filter-container">
      <el-form-item label="门店" prop="shopId">
        <shop-select v-model="searchForm.shopId" :all="true"></shop-select>
      </el-form-item>
      <transition name="el-zoom-in-top">
        <el-form-item prop="CatId" label="礼品类别" v-if="searchForm.shopId !== null">
          <gift-type-select v-model="searchForm.CatId" :shopId="searchForm.shopId" :all="true" ></gift-type-select>
        </el-form-item>
      </transition>
      <el-form-item label="礼品名称" prop="title">
        <el-input v-model="searchForm.title" placeholder="礼品名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <router-link :to="{name: 'giftAdd'}"><el-button type="primary" @click="onAdd">添加礼品</el-button></router-link>
      </el-form-item>
    </el-form>
    <!-- 过滤条件 end-->

    <!-- 表格 begin-->
    <el-table :data="list" style="width: 100%">
      <el-table-column label="所属门店">
        <template slot-scope="props">
          <span class="ml15">{{props.row.shopId | shopName}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="商品编号" align="center"></el-table-column>

      <el-table-column prop="name" label="所属类别" align="center"></el-table-column>

      <el-table-column prop="title" label="商品名称" align="center"></el-table-column>

      <el-table-column align="center" label="商品图片">
        <template slot-scope="props">
          <m-img :src="props.row.image" ratio="1" style="width: 88px"></m-img>
        </template>
      </el-table-column>

      <el-table-column label="需要积分" align="center"><template slot-scope="props"><el-tag>{{props.row.origPrice}}</el-tag></template></el-table-column>

      <el-table-column align="center" label="库存数量">
        <template slot-scope="props">{{props.row.total}}{{props.row.unit}}</template>
      </el-table-column>

      <el-table-column align="center" label="销售数量">
        <template slot-scope="props">{{props.row.soldNum}}{{props.row.unit}}</template>
      </el-table-column>

      <el-table-column align="center" label="核销数量">
        <template slot-scope="props">{{props.row.orderOver}}{{props.row.unit}}</template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="props">
          <router-link :to="{name: 'giftUpdate', params: {id: props.row.id}}"><el-button type="primary" size="small">编辑</el-button></router-link>
          <el-button type="danger" size="small" @click="onDel(props.row.id)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--分页 begin-->
    <div class="pagination-container mt20">
      <el-pagination background @current-change="onPageChange" :current-page="searchForm.page" :page-size="limit"
                     layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--分页 begin-->

    <!--编辑 or 添加 弹窗 begin-->
    <el-dialog title="编辑" :visible.sync="dialogShow">
      <el-form ref="dataForm" :model="dataForm" label-position="left" label-width="70px"
               style='width: 400px; margin-left:50px;'>
        <el-form-item label="remark">
          <el-input placeholder="Please input" v-model="dataForm.input"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--编辑 or 添加 弹窗 begin-->
  </page>
</template>

<script>
  import {elValidate} from '@/utils/widget'
  import {status_prompt, confirm_handler} from '@/utils/feedback'

  export default {
    name: 'giftList',
    data() {
      return {
        list: [],
        total: 0,
        limit: 0,
        listLoading: true,
        searchForm: {
          page: 1,
          shopId: null,
          title: null
        },
        dialogShow: false,
        dataForm: {}
      }
    },
    computed: {},
    activated () {
      this.getList()
    },
    methods: {
      // 增
      add() {

      },
      // 删
      del() {

      },
      // 获取列表
      async getList() {
        //this.listLoading = true
        let {total, list, limit} = await this.$get_list('admin/commodity/getCommodityByCondition', this.searchForm)
        Object.assign(this, {total, list, limit})
        document.documentElement.scrollTop = 0
      },
      // 更新数据
      update() {

      },
      // 搜索过滤
      onSearch() {
        this.searchForm.page = 1
        this.getList()
      },

      // 分页
      onPageChange(val) {
        this.searchForm.page = val
        this.getList()
      },

      onAdd() {
      },
      onDel(id) {
        confirm_handler({
          ajax: () => this.$post('admin/commodity/deleteCommodityById', {id}),
          hint: '确认删除这条礼品',
          success_text: '删除成功',
          fail_text: '删除失败'
        }).then(this.getList)
      },
      onUpdate() {
      },
      onDownload() {

      },
      async onSubmit() {
        await elValidate(this, 'dataForm')

        this.dialogShow = false
        await this.$nextTick()
        this.$refs.dataForm.resetFields()
      }
    }
  }
</script>
